<template>
  <div class="home">


    <div class="topNav">
      <div class="topLeft">
        <van-tabs background="#1B1344" color=" #FFFEFF" title-active-color=" #FFFEFF" title-inactive-color="#FFFFFF"
          line-height="5px">
          <van-tab v-for="(item, index) in topType" :title="item.title" :key="index">
          </van-tab>
        </van-tabs>
      </div>
      <div class="topRight">
        <img class="auto-img" src="../../public/images/home/菜单.png" alt="">
      </div>
    </div>
    <div class="search">
      <div class="inp">
        <div class="inpLeft">
          <van-search v-model="value" @focus="focus" color="#fff" background="#1B1344" shape="round" />
        </div>
        <div class="inpRight">
          <img class="auto-img" src="../../public/images/home/音乐.png" alt="">
        </div>
      </div>
      <div class="radio">
        <van-swipe :autoplay="3000" indicator-color="#160742">
          <van-swipe-item v-for="(item, index) in bannerData" :key="index">
            <banner :banner-data="item" :is-play-icon="true"></banner>
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="recommendSongList">
        <div class="recommendTitle">
          <van-cell title="你的歌单宝藏库" is-link @click="showPopup">
            <template #right-icon>
              <van-icon name="ellipsis" color="#C4C4C4" size="25" class="ellipsis" />
            </template>
          </van-cell>
          <van-popup v-model="show" position="bottom">
            <div class="item">
              <div class="icon-content">
                <div class="icon">
                  <van-icon name="chat-o" />
                </div>
                <div class="content">优先推荐相关内容</div>
              </div>
            </div>
          </van-popup>


        </div>

        <div class="recommendListPic-Text">

          <div class="recommendItem" v-for="(item, index) in recommendSongList" :key="index"
            @click="getSonDetail(item.id, item.picUrl)">
            <div class="recommendPic">
              <img class="auto-img" :src="item.picUrl" alt="">
            </div>
            <div class="recommendText">
              <span class="recommendText"> {{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="recommendSong">
        <div class="recommendTitle">
          <van-cell title="大家都在听" is-link @click="showPopup">
            <template #right-icon>
              <van-icon name="ellipsis" color="#C4C4C4" size="25" class="ellipsis" />
            </template>
          </van-cell>
          <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" />

        </div>
        <div v-for="(item, index) in randSongDataThr" :key="index">
          <recommendSongs :song-datas="item" v-on:getLikeSongs="getLikeSongs" :is-play-icon="true"></recommendSongs>
        </div>

      </div>

      <div class="recommendSongList2">
        <div class="recommendTitle">
          <van-cell title="你的歌单补给站" is-link @click="showPopup">
            <template #right-icon>
              <van-icon name="ellipsis" color="#C4C4C4" size="25" class="ellipsis" />
            </template>
          </van-cell>
          <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" />

        </div>
        <div>
          <van-swipe :loop="false" :width="100">
            <van-swipe-item v-for="(item, index) in recommendSongList2" :key="index">
              <picText :pic-text-data="item" @getSonDetail="getSonDetail(item.id, item.coverImgUrl)"></picText>
            </van-swipe-item>

          </van-swipe>
        </div>

      </div>
      <div class="Ranking">
        <div class="recommendTitle">
          <van-cell title="排行榜" is-link @click="showPopup">
            <template #right-icon>
              <van-icon name="ellipsis" color="#C4C4C4" size="25" class="ellipsis" />
            </template>
          </van-cell>
          <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" />

        </div>
        <div>
          <van-swipe :loop="false" :width="100">
            <van-swipe-item v-for="(item, index) in rankingList" :key="index">
              <picText :pic-text-data="item" @getSonDetail="getSonDetail(item.id, item.coverImgUrl)"></picText>
            </van-swipe-item>

          </van-swipe>
        </div>
      </div>

    </div>




  </div>
</template>

<script>
import { mapMutations } from 'vuex';
// 导入推荐歌单组件
import recommendSongs from "../components/recommendSongs.vue"
// 导入
import banner from '../components/banner.vue'
import picText from '../components/picText.vue'

export default {
  name: 'Home',

  components: {
    // ListItem
    recommendSongs,
    banner,
    picText
  },


  data() {
    return {
      // singerListData: [],

      value: '',
      isLikeSong: false,
      isLikeSongId: "",
      // 顶部类型
      topType: [
        {
          title: "推荐"
        },
        {
          title: "音乐馆"
        },
        {
          title: "听书"
        },
        {
          title: "有声"
        },
        {
          title: "世界杯"
        },
        {
          title: "说唱"
        },
        {
          title: "欧美"
        },
        {
          title: "国风"
        },

      ],
      // 推荐歌单数据
      recommendSongList: "",
      recommendSongList2: "",
      show: false,
      title2: "根据你的喜好推荐",
      topListTypeTitle: "",
      topListTypeTitleOId: "",
      randSongDataThr: "",
      bannerData: "",
      clickId: ""


    };
  },
  created() {
    this.getRecommendList()
    this.getRankType()
    this.getBanner()
    this.getRecommendSongList2()
    this.rankingList()

  },
  methods: {
    ...mapMutations(['setIsMain']),
    // 获取搜索的关键词
    focus(value) {
        
      if (value) {
        this.setIsMain(false)
        //   
        this.$router.push({ name: "SearchPage" })
      }
    },
    // 获取首页轮播图
    getBanner() {
      this.axios({
        method: "get",
        url: "/banner",
        params: {
          type: 2

        }
      }).then(res => {
        //   
        this.bannerData = res.data.banners

        // this.recommendSongList = res.data.result
        //   
      }).catch(err => {
          
      })
    },
    // 获取推荐歌单
    getRecommendList() {
      this.axios({
        method: "get",
        url: "/personalized",
        params: {
          limit: 6,

        }
      }).then(res => {
        //   
        this.recommendSongList = res.data.result
          
      }).catch(err => {
          
      })
    },
    getRecommendSongList2() {
      this.axios({
        method: "get",
        url: "/top/playlist",
        params: {
          limit: 6,

        }
      }).then(res => {
        //   
        this.recommendSongList2 = res.data.playlists
          
      }).catch(err => {
          
      })
    },
    // 获取排行榜数据
    rankingList() {
      this.axios({
        method: "get",
        url: "/toplist"
      }).then(res => {
          

        this.rankingList = res.data.list

      }).catch(err => {
          
      })
    },
    // 点击更多，展示弹出层
    showPopup() {
      //   
      this.show = true;
    },

    // 获取歌单类型
    getRankType() {
      this.axios({
        method: "get",
        url: "/toplist"
      }).then(res => {
        //   
        this.topListTypeTitle = res.data.list[3]
        this.topListTypeTitleOId = res.data.list[3].id
        this.getRankSong(this.topListTypeTitleOId)
      }).catch(err => {
          
      })
    },
    // 获取排行榜详情数据
    getRankSong(id) {
      this.axios({
        method: "get",
        url: "/playlist/detail",
        params: {
          id: id
        }
      }).then(res => {
        //   
        this.randSongDataThr = res.data.playlist.tracks.slice(0, 3)

          

      }).catch(err => {
          
      })
    },
    // 跳转歌单详情页
    getSonDetail(id, url) {
        
        
      this.setIsMain(false)
      this.$router.push({ name: "RecommendLIstDetail", params: { id, url } })
    },
    // 收藏或取消歌曲
    getLikeSongs(islike, item) {
       
        
      let loginInfo = window.localStorage.getItem('loginInfo')
        
      if (loginInfo) {
        let loginInfo2 = JSON.parse(loginInfo)
        if (loginInfo2.length !== 0) {
          this.isLikeSong = islike
          if (this.isLikeSong) {
            this.axios({
              method: "get",
              url: "/song/detail",
              params: {
                ids: item.id,
              }
            }).then(res => {
                
              // 设置本地存储
              let goLikeSong = localStorage.getItem("likeSong")
              // 如果本地存储不存在,则空
              if (!goLikeSong) {
                goLikeSong = []
              }
              // 如果本地存储存在,则存数据到本地存储中
              else {
                goLikeSong = JSON.parse(goLikeSong)
              }
              // 将需要存储的数据存到本地存储中
              goLikeSong.push(res.data.songs[0])

              // 把重复的数据去掉
              goLikeSong = [...new Map(goLikeSong.map(x => [x.id, x])).values()]
                
              window.localStorage.setItem("likeSong", JSON.stringify(goLikeSong))

            }).catch(err => {
                
            })
          } else {
            this.axios({
              method: "get",
              url: "/song/detail",
              params: {
                ids: item.id,
              }
            }).then(res => {
              let goLikeSong2 = JSON.parse(goLikeSong)
              let index = goLikeSong2.findIndex(i => {
                return i.id === this.isLikeSongId
              })
              goLikeSong2.splice(index, 1)
              localStorage.setItem("likeSong", JSON.stringify(goLikeSong2))

            }).catch(err => {
                
            })
          }

        } else {
          Toast('登录后收藏')
          this.$router.push({ name: "GoLogin" })
        }




      }

    }

  }

}
</script>

<style lang="less" scoped>
.home {
  color: #FFFEFF;
  background-color: #160742;
  padding-bottom: 150px;

  // opacity: 0.6;
  .topNav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 44px;

    .topLeft {
      width: 70%;

      /deep/.van-sticky--fixed {
        right: 20%;
      }

      /deep/.vant-cell {
        color: #54FFF4;
      }

      .van-row {
        height: 50px;
        line-height: 50px;
      }

      /deep/.van-tabs__line {
        background-color: #54FFF4;
      }

    }

    .topRight {
      // margin-left: 20px;
      width: 30px;
      height: 30px;
    }
  }

  .search {
    width: 90%;
    margin: 10px 5%;

    .inp {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;

      .inpLeft {
        width: 80%;

        /deep/.van-search {
          padding: 0px 0px;
          height: 30px;
        }

        .van-cell {
          height: 30px;
          color: #fff;
        }

        .van-search__content {
          background-color: #271A4F;
        }
      }

      .inpRight {

        // margin-left: 20px;
        width: 30px;
        height: 30px;
      }

      /deep/.van-field__control {
        color: #fff;
      }
    }
  }

  .radio {
    margin-top: 10px;
    height: 130px;

    /deep/.van-swipe {
      width: 100%;
      height: 130px;
    }

    /ddeep/.banner img {
      width: 100%;
      height: 100%;
    }

  }

  .recommendTitle {
    font-size: 16px;

    .item {
      display: flex;
      height: 50px;
      align-items: center;

      .content {
        margin-left: 10px;
      }
    }

    .van-cell {
      background-color: #160742;
      color: #fff;
      padding: 10px 0px;
      align-items: center;
    }

    .custom-title {
      margin-right: 4px;
      vertical-align: middle;
    }

    .search-icon {
      font-size: 16px;
      line-height: inherit;
    }

    .van-col--6:first-child {
      width: 40%;
    }

    .van-col--6:last-child {
      width: 10%;
    }

    .img {
      width: 35px;
      height: 35px;
    }
  }

  .recommendSongList {
    margin-top: 10px;
    // background-color: #20CAC8;



    .recommendListPic-Text {
      // width: 200%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      overflow: hidden;

      margin-top: 2px;

      .recommendItem {
        width: 100px;
        margin: 5px 0px;

        .recommendPic {
          width: 100px;

          img {
            border-radius: 10px;
          }
        }

        .recommendText {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          margin-top: 3px;
        }
      }
    }


  }

  .recommendSong,
  .randSong {
    margin-top: 10px;
  }


  .Ranking {
    .van-swipe-item {
      margin-right: 10px;
    }
  }

  .recommendSongList2 {
    .van-swipe-item {
      margin-right: 10px;
    }
  }

  /deep/.van-swipe__indicators {
    display: none;
  }

}
</style>